<!--
 * @Author: 273198238 2412069378@qq.com
 * @Date: 2025-03-14 09:23:48
 * @LastEditors: 273198238 2412069378@qq.com
 * @LastEditTime: 2025-03-18 19:53:36
 * @FilePath: \population\src\views\Population.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="box">
        <div class="pop">
            <pop-window></pop-window>
        </div>
        <div class="hander">
            <hander></hander>
        </div>
        <div class="body">
            <div class="left-aside">
                <div class="left-top">
                    <left-top></left-top>
                </div>
                <div class="left-botton">
                    <left-botton></left-botton>
                </div>
            </div>
            <div class="main">
                <!-- <centre></centre> -->
            </div>
            <div class="right-aside">
                <div class="right-top">
                    <right-top></right-top>
                </div>
                <div class="right-botton">
                    <right-botton></right-botton>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
// import Centre from '@/components/Centre.vue';
import LeftBotton from '@/components/LeftBotton.vue';
import Hander from '@/components/Hander.vue';
import RightBotton from '@/components/RightBotton.vue';
import LeftTop from '@/components/LeftTop.vue'
import RightTop from '@/components/RightTop.vue';
import PopWindow from '@/components/PopWindow.vue';
export default {
    name: 'Population',
    components: { 
        LeftTop,
        RightTop,
        RightBotton,
        Hander,
        LeftBotton,
        // Centre,
        PopWindow
     },
    data() {
        return {

        }
    },
    mounted() {

    }
}
</script>

<style lang="less" scoped>
.pop{
    position: fixed;
    top: 0;
    left: 0;
}
.hander{
    width: 100%;
    height: 20vh;
}
.body{
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: space-between;
    .left-aside{
        width: 25%;
        height: 77vh;
        border: 1px solid #3874bd;
        box-shadow: 2px -2px 6px 2px #4b5b8c;
        border-radius: 5px;
        background-color:rgba(255, 255, 255, 0.1);
        padding: 10px;
        .left-top{
            width: 100%;
            height: 40%;
        }
        .left-botton{
            width: 100%;
            height: 55%;
            margin-top: 40px;
        }
}
.right-aside{
    width: 25%;
    height: 77vh;
    border: 1px solid #3874bd;
    box-shadow: -1px -2px 6px 2px #4b5b8c;
    border-radius: 5px;
    background-color:rgba(255, 255, 255, 0.1);
    padding: 10px;
    .right-top{
        width: 100%;
        height: 40%;
    }
    .right-botton{
        width: 100%;
        height: 55%;
        margin-top: 10px;
    }
}
.main{
    width: 50%;
    height: 77vh;
    // border: 1px solid #689dde;
    padding: 10px;
}
}
</style>
